<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>登录</span>
    </div>
    <el-input v-model="username" placeholder="请输入账号" class="input-css" name="username"></el-input>
    <el-input v-model="password" placeholder="请输入密码" class="input-css" name="password" type="password"></el-input>
    <p class="notice-msg">{{userMsg}}</p>
    <el-button type="primary" class="input-css" @click="login">立即登录</el-button>
  </el-card>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      username: '',
      password: '',
      userMsg:''
    }
  },
  methods: {
    login () {
      let userName = this.username;
      let passWord = this.password;
      if((userName == "" || userName == undefined) && (passWord == "" || passWord == undefined)){
      	this.userMsg = "账号或密码不能为空！"
      	return false
      }else{
      	this.userMsg = ""
      	this.$axios.post('/api/user/login', {
	        username:userName,
	        password:passWord
	    })
	    .then((res) => {
	        console.log(res.data)
	        if(res.status == 200){
	        	if(!res.data.msg){
		        	this.$router.push({
		        		path: '/'
		        	})
		        } else {
		        	this.userMsg = res.data.msg
		        }
	        }
	    })
	    .catch((err) => {
	        console.log(err)
	    })
      }
    }
  }
}
</script>

<style>
.box-card{
  width: 20%;
  height:300px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform:translate(-50%,-50%);
  box-sizing: border-box;
  overflow-y: hidden;
}
.input-css{
  margin:10px 0;
}
.notice-msg{
	color: red;
	font-size: 14px;
	margin:0;
}
</style>
